<template>
    <div class="app-container">
      <el-card class="box-card" shadow="never">
        <el-row :gutter="20">
          <el-col :span="2"
            ><el-input size="mini" placeholder="楼宇名称"></el-input>
          </el-col>
          <el-col :span="2"
            ><el-input size="mini" placeholder="楼宇名称"></el-input>
          </el-col>
          <el-col :span="2"
            ><el-input size="mini" placeholder="楼宇名称"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="mini" @click="handleSearch()"
              >查询</el-button
            ></el-col
          >
        </el-row>
      </el-card>
  
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        style="margin-top: 1%"
      >
        <el-table-column align="center" label="ID" width="60">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.companyName }}
          </template>
        </el-table-column>
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.companyCode }}
          </template>
        </el-table-column>
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.city }}
          </template>
        </el-table-column>
  
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.county }}
          </template>
        </el-table-column>
  
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.address }}
          </template>
        </el-table-column>
  
        <el-table-column label="用户名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.personName }}
          </template>
        </el-table-column>
  
        <el-table-column label="审核状态" width="100" align="center">
          <template slot-scope="scope">
            <!-- 审核状态(支付渠道为对公则有该字段)  1 审核中   2 审核完成  3 审核拒绝 -->
            <span
              v-if="scope.row.review == 1"
              style="color: rgb(64, 158, 255)"
              >审核中</span
            >
            <span
              v-if="scope.row.review == 2"
              style="color: rgb(103, 194, 58)"
              >通过</span
            >
            <span
              v-if="scope.row.review == 3"
              style="color: rgb(245, 108, 108)"
              >驳回</span
            >
          </template>
        </el-table-column>
  
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.creationTime | formatYmdHms }}
          </template>
        </el-table-column>
  
        <el-table-column
          align="center"
          prop="created_at"
          label="操作"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleDetails(scope.row.id)"
              >详情</el-button
            >
            <el-popconfirm
              title="是否审核通过？"
              size="mini"
              confirm-button-text="是"
              cancel-button-text="驳回"
              icon="el-icon-info"
              icon-color="red"
              @confirm="handleConfirm(scope.row.id)"
              @cancel="handleCancel(scope.row.id)"
            >
              <el-button slot="reference" size="mini">审核</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="text-align: center">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="where.pageIndex"
          :page-sizes="[10, 15, 20, 25, 30]"
          :page-size="where.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import { getCompanyChangeInfoList, getreview } from "@/api/company";
  export default {
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: "success",
          draft: "gray",
          deleted: "danger",
        };
        return statusMap[status];
      },
    },
    data() {
      return {
        list: [],
        listLoading: true,
        where: {
          pageIndex: 1,
          pageSize: 10,
          refundType: "",
        },
        total: 0,
        form: {},
      };
    },
    created() {
      this.fetchData(this.where);
    },
    methods: {
      fetchData(obj) {
        this.listLoading = true;
        getCompanyChangeInfoList(obj)
          .then((response) => {
            console.log(response);
            this.listLoading = false;
            this.list = response.data.list;
            this.total = response.data.total;
            this.currentPage4 = response.data.currentPage;
            this.pageSize = response.data.pageSize;
          })
          .catch((error) => {
            console.log(error);
            this.listLoading = false;
          });
      },
      handleSizeChange(val) {
        this.where.pageSize = val;
        this.fetchData(this.where);
      },
      handleCurrentChange(val) {
        this.where.pageIndex = val;
        this.fetchData(this.where);
      },
      handleDetails(id) {
        window.open(
          this.$router.resolve({
            path: "/customer/Companydetails",
            query: { id: id },
          }).href,
          "_blank"
        );
      },
      handleAudit(id) {
        this.listLoading = true;
        getreview(id)
          .then((response) => {
            console.log(response);
            this.listLoading = false;
            this.fetchData(this.where);
          })
          .catch((error) => {
            console.log(error);
            this.listLoading = false;
          });
      },
      handleConfirm(id) {
        this.isLoading = true; // 开始加载
        // 调用接口
        getreview(id, 2)
          .then((res) => {
            this.$message.success(res.message);
            this.fetchData(this.where);
          })
          .catch((err) => {
            this.$message.success(err.message);
          })
          .finally(() => {
            this.isLoading = false; // 结束加载
          });
      },
      handleCancel(id) {
        this.isLoading = true; // 开始加载
        // 调用接口
        getreview(id, 3)
          .then((res) => {
            this.$message.success(res.message);
            this.fetchData(this.where);
          })
          .catch((err) => {
            this.$message.success(err.message);
          })
          .finally(() => {
            this.isLoading = false; // 结束加载
          });
      },
      handleSearch() {
        this.fetchData(this.where);
      },
    },
  };
  </script>